<template>
  <div class="app-container">
    <el-dropdown @command="handleCommand">
      <el-button type="primary" icon="el-icon-plus" round>
        新建流程<i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="def in defs" :command="def" :key="def.key">{{
          def.name
        }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <el-button
      style="margin-left: 10px"
      type="primary"
      icon="el-icon-notebook-2"
      @click="editProc"
      round
      >填写信息</el-button
    >

    <el-button type="danger" icon="el-icon-paperclip" @click="history" round
      >详情</el-button
    >

    <el-button
      type="warning"
      icon="el-icon-picture-outline"
      @click="show_proc"
      round
      >流程图</el-button
    >

    <el-button type="danger" icon="el-icon-folder" @click="attach" round
      >附件</el-button
    >

    <div style="float: right">
      <el-input
        placeholder="任务名称、流程名称"
        style="width: 200px; margin-left: 10px"
        @keyup.enter.native="refreshList"
        v-model="listQuery.s"
      >
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </div>
    <el-table
      v-loading="listLoading"
      ref="singleTable"
      element-loading-text="Loading"
      :data="list"
      @row-click="handleSelectionChange"
      fit
      highlight-current-row
    >
      <!--<el-table-column prop="id" label="ID"></el-table-column>-->
      <el-table-column label="序号" width="50">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column prop="instName" label="实例"></el-table-column>
      <el-table-column prop="def.name" label="流程"></el-table-column>
      <el-table-column prop="name" label="任务"></el-table-column>
      <el-table-column prop="createTime" label="提交时间"></el-table-column>
      <el-table-column prop="startUser" label="申请人"></el-table-column>
      <el-table-column prop="assignee" label="受理人"></el-table-column>
      <el-table-column prop="candidateUsers" label="候选人"></el-table-column>
      <el-table-column prop="candidateGroups" label="候选组"></el-table-column>
    </el-table>

    <div class="block" style="float: right">
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="listQuery.limit"
        :current-page="listQuery.page"
        :total="listQuery.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { procList, startProc, BASEURL, procMyTodo } from '@/api/workflow'
import { UserModule } from '@/store/modules/user'

@Component({
  name: 'proc-mine'
})
export default class extends Vue {
  private list: any = []
  private listLoading = true
  private listQuery = {
    page: 1,
    limit: 20,
    user: UserModule.name,
    act: '1',
    total: 0,
    s: ''
  }

  private attach() {
    if(!this.selectRow){
      this.$alert('请选择要操作的任务');
      return;
    }
    this.$router.push({
        path: '/workflow/proc-attachment',
        query: {
          taskid: this.selectRow.id,
          instid:this.selectRow.processInstanceId
        }
      })
  }
  handleCurrentChange(page: any) {
    this.listQuery.page = page
    this.getList()
  }

  refreshList() {
    this.getList()
  }

  created() {
    this.getList()
    this.procDef()
  }
  /**
   * 开启一个流程
   */
  handleCommand(def: any) {
    this.$prompt('任务标题', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern: /\S/,
      inputValue: def.name,
      inputErrorMessage: '任务标题不能为空！'
    })
      .then((value: any) => {
        startProc({
          user: UserModule.name,
          key: def.id,
          title: value.value
        }).then((rs) => {
          const { data } = rs

          this.$message({
            type: 'success',
            message: '"' + value.value + '"任务创建成功！'
          })
          setTimeout(() => {
            this.editProc(null, data.taskId)
          }, 200)
        })
      })
      .catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })

    // this.$confirm('将开始一个“' + def.name + '”流程，是否继续？', '提示', {
    //   confirmButtonText: '确定',
    //   cancelButtonText: '取消',
    //   type: 'warning'
    // })
    //   .then(() => {
    //     startProc({ user: UserModule.name, key: def.id }).then((rs) => {
    //       const { data } = rs
    //       setTimeout(() => {
    //         console.log(data)
    //         this.editProc(null, data.taskId)
    //       }, 500)
    //       //this.getList()
    //     })
    //   })
    //   .catch(() => {
    //     // this.$message({
    //     //   type: 'info',
    //     //   message: '已取消删除'
    //     // })
    //   })
  }
  /**
   * 任务详情
   */
  history() {
    if (this.selectRow) {
      this.$router.push({
        path: '/workflow/proc-history',
        query: {
          id: this.selectRow.processInstanceId
        }
      })
    } else {
      this.$alert('请选择要处理的流程', '系统提示', {
        confirmButtonText: '确定',
        callback: (action) => {}
      })
    }
  }
  /**
   * 显示流程图
   */
  show_proc() {
    if (this.selectRow) {
      this.$router.push({
        path: '/workflow/proc-image',
        query: {
          id: this.selectRow.processInstanceId
        }
      })
    } else {
      this.$alert('请选择要处理的流程', '系统提示', {
        confirmButtonText: '确定',
        callback: (action) => {}
      })
    }
  }
  /**
   * 编辑流程信息
   */
  editProc(event: any, id: string = '') {
    if (id || this.selectRow) {
      this.$router.push({
        path: '/workflow/form',
        query: {
          id: id || this.selectRow.id
        }
      })
    } else {
      this.$alert('请选择要处理的流程', '系统提示', {
        confirmButtonText: '确定',
        callback: (action) => {}
      })
    }
  }
  private selectRow: any
  handleSelectionChange(val: any) {
    this.selectRow = val
  }
  private defs: any[] = []
  private async procDef() {
    const { data } = await procList(this.listQuery)
    this.defs = data
  }
  private async getList() {
    this.listLoading = true
    const { data } = await procMyTodo(this.listQuery)
    this.list = data.ls
    this.listQuery.total = data.total
    // Just to simulate the time of the request
    this.listLoading = false
  }
}
</script>
